<!-- src/components/register/LawyerRegisterForm.vue -->
<template>
  <el-form
      ref="lawyerFormRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      class="register-form"
  >
    <!-- 基础信息字段同公众注册 -->

    <el-form-item label="律师执照" prop="license">
      <el-upload
          class="license-upload"
          action="#"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="handleLicenseChange"
      >
        <el-button type="primary">选择文件</el-button>
        <div class="file-name">
          {{ formData.license ? formData.license.name : '未选择文件'
          }}
        </div>
      </el-upload>
      <div class="upload-tip">支持格式: PDF/JPG/PNG (最大10MB)</div>
    </el-form-item>

    <el-form-item label="执业证号" prop="licenseNo">
      <el-input
          v-model="formData.licenseNo"
          placeholder="请输入律师执业证号"
      />
    </el-form-item>

    <el-form-item label="执业年限" prop="practiceYears">
      <el-input-number
          v-model="formData.practiceYears"
          :min="1"
          :max="50"
          controls-position="right"
      />
    </el-form-item>

    <el-form-item label="擅长领域" prop="expertise">
      <el-select
          v-model="formData.expertise"
          multiple
          placeholder="请选择擅长领域"
          style="width: 100%"
      >
        <el-option
            v-for="item in expertiseOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button
          type="primary"
          class="submit-btn"
          @click="submitForm"
      >
        提交律师注册
      </el-button>
    </el-form-item>
  </el-form>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
const emit = defineEmits(['submit'])
// 表单数据
const formData = reactive({
  // 基础字段同公众注册
  phone: '',
  smsCode: '',
  password: '',
  confirmPassword: '',
  name: '',
  // 律师特有字段
  license: null,
  licenseNo: '',
  practiceYears: 3,
  expertise: []
})
// 擅长领域选项
const expertiseOptions = [
  { value: 'criminal', label: '刑事辩护' },
  { value: 'civil', label: '民事诉讼' },
  { value: 'commercial', label: '商事纠纷' },
  { value: 'labor', label: '劳动纠纷' },
  { value: 'realestate', label: '房产纠纷' },
  { value: 'intellectual', label: '知识产权' },
  { value: 'family', label: '婚姻家庭' },
  { value: 'contract', label: '合同纠纷' }
]
// 验证规则
const formRules = reactive({
  // 基础字段验证同公众注册
  license: [
    { required: true, message: '请上传律师执照', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('请上传律师执照'))
        } else {
          const validTypes = ['image/jpeg', 'image/png',
            'application/pdf']
          const validSize = 10 * 1024 * 1024 // 10MB

          if (!validTypes.includes(value.raw.type)) {
            callback(new Error('仅支持JPG/PNG/PDF格式'))
          } else if (value.raw.size > validSize) {
            callback(new Error('文件大小不能超过10MB'))
          } else {
            callback()
          }
        }
      },
      trigger: 'blur'
    }
  ],
  licenseNo: [
    { required: true, message: '请输入执业证号', trigger: 'blur' },
    { pattern: /^\d{10,18}$/, message: '执业证号格式不正确', trigger:
          'blur' }
  ],
  practiceYears: [
    { required: true, message: '请选择执业年限', trigger: 'blur' }
  ],
  expertise: [
    { required: true, message: '请至少选择一个擅长领域', trigger:
          'change' }
  ]
})
const lawyerFormRef = ref(null)
// 处理执照上传
const handleLicenseChange = (file) => {
  formData.license = {
    name: file.name,
    raw: file.raw
  }
}
// 提交表单
const submitForm = async () => {
  try {
    await lawyerFormRef.value.validate()
    emit('submit', formData)
  } catch (error) {
    ElMessage.warning('请完善表单信息')
  }
}
</script>
<style scoped>
.license-upload {
  display: flex;
  align-items: center;
  gap: 10px;
}
.file-name {
  margin-left: 10px;
  color: #606266;
}
.upload-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}
</style>